<template>
	<view class="w_100">
	
		<view class="w_100 j_c_c d_f " style="margin-top: 0rpx;">
			<view class="d_f j_c_c class_" style="width: 90%;">
				<view  style="width: 96%;" class="">
					<view style="width:100%;"class="d_f j_c_c">
						<view class="d_f j_c_c" style="width: 80%;">
							<text class="txt" @tap="cutFun(1)" :class="count==1?'txt_1':''">手机号注册</text>
							<!-- <text class="txt" @tap="cutFun(2)" :class="count==2?'txt_1':''">账号注册</text> -->
						</view>
					</view>
					<view class="" style="margin-top:80rpx;">
						<view class="p_r" style="height: 86rpx;margin-top:80rpx;">
							<input type="text" v-model="phone" class="inp_2" :placeholder="accout" placeholder-class="in_pla"/>
							<view class="" @tap.stop="clearFun1">
								<uni-icons type="clear" style="top:24rpx;right:30rpx;color:#888888" class="p_a"></uni-icons>
							</view>
						</view>
						
						<view class="p_r" style="height: 86rpx;margin-top:80rpx;" >
							<input type="text"  v-model="passCode" class="inp_1" :placeholder="pass" placeholder-class="in_pla"/>
							<text class="code p_a" style="top:24rpx;right:10rpx" @tap.stop="forgetPass">{{code}}</text>
						</view>
						
						<view class="p_r" style="height: 86rpx;margin-top:80rpx;">
							<input type="text" v-model="passWord" class="inp_2" placeholder="请输入6-18位数字字母" placeholder-class="in_pla"/>
							<view class="" @tap.stop="clearFun2">
								<uni-icons type="clear" style="top:24rpx;right:30rpx;color:#888888" class="p_a"></uni-icons>
							</view>
						</view>
						
					</view>
					<view class="d_f j_c_c w_100" style="margin-top: 100rpx;"  @tap.stop="regisFun">
						<view class=" box">注册</view >
					</view>
					<view class="d_f j_c_c w_100" style="margin-top:60rpx;">
						<text style="color:#24CCB3;font-size: 28rpx;" @tap="logoFun">登录</text>
					</view>
				</view>
			</view>
		</view>
		
		<view class="p_a" style="bottom: 40rpx;left: 50%;width: 400rpx;margin-left: -200rpx;">
			<view class="d_f j_c_c w_100" style="font-size: 24rpx;color:#A6A6A6;">
				<text>登录即代表您已同意</text><text style="color:#6899F7;" @tap="user">《用户协议》</text>                
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				count:1,
				accout:"请输入手机号",
				pass:"请输入验证码",
				code:"获取验证码",
				passWord:"",
				phone:"",
				passCode:""
			}
		},
	
		methods: {
			cutFun(val){
				this.passWord = "";
				this.phone = "";
				this.count = val;
				this.accout=val==1?"请输入手机号":' 请输入账号';
				this.pass=val==1?"请输入手机验证码":' 请输入密码';
				this.code=val==1?"获取验证码":'';
			},
			// 清楚输入框内容
			clearFun1(){
				this.phone = "";
			},
			clearFun2(){
				this.passWord = "";
			},
			// 验证码
			forgetPass(){
				if(!this.phone)return this.$funs.show("请输入手机号",0)
				if(this.code!="获取验证码")return this.$funs.show("请勿频繁操作",0)
				let data={
					url:"/app/sms/appAcquireVerifyCode",
					u:1,
					t:1,
					data:{
						phoneNumber:this.phone,
					}
					
				}
				this.$api(data).then(res=>{
					console.log(res)
					if(res.data.code==200){
						this.code = 60;
						let i =setInterval(()=>{
							if(this.code==0){
								this.code="获取验证码";
								clearInterval(i)
								return 
							} 
							this.code =this.code-1
						},1000)
					}
				})
			},
			// 跳登录
			logoFun(){
				uni.navigateTo({
					url:"/pages/logo-register/logo"
				})
			},
			// 跳用户基本信息
			information(){
				uni.navigateTo({
					url:"/pages/logo-register/basicInformation"
				})
			},
			// 跳协议
			user(){
				uni.navigateTo({
					url:"/pages/logo-register/userAgreement"
				})
			},
			regisFun(){
				
				if(!this.phone)return this.$funs.show("请输入手机号",0)
				if(!(/^1[3456789]\d{9}$/.test(this.phone)))return this.$funs.show("请输入正确的手机号",0)
				if(!this.passCode)return this.$funs.show("请输入验证码",0)
				if(!this.passWord)return this.$funs.show("请输入密码",0)
				if(!(/^[[0-9A-Za-z][0-9A-Za-z]{5,18}$/.test(this.passWord)))return this.$funs.show("密码格式不正确",0)
				let data={
					t:2,
					u:2,
					url:"/app/login/register",
					data:{
						phoneNumber:this.phone,
						password:this.passWord,
						captcha:this.passCode,
					}
				}
				
				this.$api(data).then(res=>{
					console.log(res)
					if(res.data.code===200){
						this.$store.state.token = res.data.result.sysUser.token;
						this.$store.state.userid  = res.data.result.sysUser.id;
						uni.setStorageSync('token', res.data.result.sysUser.token)
						uni.setStorageSync('userId', res.data.result.sysUser.id)
						uni.setStorageSync('userInfo', res.data.result.sysUser)
						
						console.log(this.$store.state.userid )
						this.$funs.show(res.data.message,1)
						setTimeout(()=>{
							this.information()
						},3000)
						return
					}
					this.$funs.show(res.data.message+'请前去登录',0)
				})
			}
		}
	}
</script>

<style>
.class_{
	border-radius: 80rpx;
	/* box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.2);	 */
	padding:100rpx 0 100rpx 0;
}
.txt{
	width: 50%;
	height: 80rpx;
	font-size: 42rpx;
	line-height: 80rpx;
	text-align: center;
	font-size: 36rpx;
}

.inp_1{
	width: 54%;
	padding:0 36% 0 10%;
	height: 86rpx;
	line-height: 86rpx;
	border-radius: 43rpx;
	background-color: #F8F8F8;
	margin-top: 80rpx;
}
.inp_2{
	width:70%;
	padding:0 20% 0 10%;
	height: 86rpx;
	line-height: 86rpx;
	border-radius: 43rpx;
	background-color: #F8F8F8;
}
.code{
	display: inline-block;
	width:36%;
	text-align: center;
	border-left: 1rpx solid #CECECF;
	font-size: 28rpx;
	color: #888888;
}
.box{
	width: 100%;
	height: 86rpx;
	font-size: 32rpx;
	line-height: 86rpx;
	text-align: center;
	color: #FFFFFF;
	background: linear-gradient(to right,#2AD3BA,#87F4D0);
	border-radius: 40rpx;
}
.txts{
	width: 92rpx;
	height: 1rpx;
	border-top: 1rpx solid #D8D8D8;
}
.txt_1{
	color:#24CCB3;
}
.in_pla{
	color:#B2B2B2;
	font-size: 28rpx;
}
</style>
